<template>
	<view class="label_list" v-if="is_label_list_popup">
		<view class="label_list_content">
			<view class="label_list_title">
				<view>为你推荐</view>
				<view @click="changeTab(tabId)" v-if="type != 1">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" style="width: 50rpx;height: 50rpx"/>
				</view>
			</view>
			<view class="label_list_popup_search" v-if="type != 1">
				<view class="label_list_popup_close" @click="keywords = ''">取消</view>
				<input class="label_list_popup_keywords" type="text" v-model="h_keywords" placeholder="请输入行业词"/>
				<view class="label_list_popup_confirm" @click="keywords = h_keywords">确定</view>
			</view>
			<view class="label_list_data" v-if="type == 1">
				<view class="label_list_item" v-for="(item, index) in labelList" :key="index" :class="tabId.includes(item.label_id) ? 'label_list_item_on' : ''" @click="changeTab(index)">{{item.label_name}}</view>
			</view>
			<view class="label_list_data" v-else>
				<view class="label_list_item" v-for="(item, index) in labelList" :key="index" :class="tabId == index ? 'label_list_item_on' : ''" v-show="item.label_name.includes(keywords)" @click="changeTab(index)">{{item.label_name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				label_ids: [],
				h_keywords: '',
				keywords: '',
			}
		},
		props: {
			is_label_list_popup: {
				type: Boolean,
				default: false,
			},
			labelList: {
				type: Array,
				default: () => []
			},
			tabId: {
				type: [Number, Array],
				default: 0,
			},
			type: {
				type: Number,
				default: 0,
			}
		},
		methods: {
			changeTab(index) {
				this.$emit('onChangeTag', {
					index
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
.label_list {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	.label_list_content {
		width: 100%;
		height: 80vh;
		position: absolute;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx 50rpx 150rpx;
		overflow-y: auto;
		background-color: #fff;
		.label_list_title {
			display: flex;
			flex-direction: initial;
			font-size: 36rpx;
			font-weight: bold;
			justify-items: center;
			justify-content: space-between;
			margin: 30rpx 0 20rpx;
			.label_list_close {
				font-size: 46rpx;
			}
		}
		.label_list_popup_search {
			padding-bottom: 15rpx;
			margin-bottom: 15rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F5F5F5;
			font-size: 38rpx;
			font-weight: 500;
			border-bottom: 1rpx solid #E7E7E7;
			.label_list_popup_keywords {
				flex: 1;
				border: 1px solid #F5F5F5;
				margin: 0 30rpx;
				padding: 15rpx;
				font-size: 26rpx;
			}
			.label_list_popup_confirm {
				color: #07C160;
			}
		}
		.label_list_data {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 36rpx;
			font-size: 30rpx;
			.label_list_item {
				// border: 1px solid #ccc;
				text-align: center;
				padding: 10rpx;
				border-radius: 32rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #1C211D;
				line-height: 36rpx;
				// background: #F6F7FB;
				border: 1rpx solid #E7E7E7;
			}
			.label_list_item_on {
				background: #FFE103;
				border: 1rpx solid #FFE103;
			}
		}
	}
}
</style>
